<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <title>登录页面</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            height: 100vh;
            font-family: Arial, sans-serif;
            background-image: url('photo/test.png');
            background-size: cover; /* 背景图尺寸适应 */
            background-repeat: no-repeat; /* 防止背景图重复 */
            background-position: center center; /* 居中显示背景图 */
        }
        .left {
            width: 20%;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            background-color: transparent;
            transition: background-image 0.5s ease-in-out;
            font: italic bold 1.2em "Fira Sans", sans-serif;
        }
        .right {
            width: 80%;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            
            background-size: cover;
            background-position: center;
            padding: 20px;
        }
        /* .logo-container {
            text-align: left;
            margin-top: 20px;
            margin-bottom: 20px;
            position: absolute;
            top: 0%;
            left: 5%;
        }

        .logo {
            width: 100px;

        } */

        .logo-container {
            text-align: left;
            margin-top: 20px;
            margin-bottom: 20px;
            position: absolute;
            top: 0%;
            left: 5%;
            display: flex;
            align-items: center;
            color: #f9f7f7;
        }

        .logo {
            width: 100px;
            margin-right: 10px; /* 调整logo和文字之间的间距 */
        }
        .text-container {  
            display: flex;  
            flex-direction: column; /* 确保文本垂直排列 */  
            align-items: flex-start; /* 文本左对齐（可选，但通常是默认的） */  
            font: italic bold 1.2em "Fira Sans", sans-serif;
        }  
        .big-text {  
            font-size: 24px;  
            font-weight: bold;  
            margin: 0;  
        }  
        
        .small-text {  
            font-size: 16px;  
            margin-top: 5px; /* 在大文本和小文本之间添加一些空间 */  
        }
        .vertical-line {
            width: 2px;
            background-color: rgba(0, 0, 0, 0.2);
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
            height: 100%;
            position: absolute;
            left: 20%;
            top: 0;
            z-index: 1;
        }
        .circle {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background-color: rgb(27, 70, 125);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 15px;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.3s;
            z-index: 2;
        }
        .circle:hover {
            background-color: rgb(9, 33, 110);
        }
        .circle.selected {
            transform: scale(1.2);
        }
        .profile-pic {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
            margin-bottom: 20px;
            transition: background-image 0.5s ease-in-out;
        }
        .profile-pic img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .input-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            height: 50%;
        }
        .loginbox{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 400px;
            padding:40px;
            background: rgba(255, 255, 255, 0.8);
            box-sizing: border-box;
            box-shadow: 0 15px  25px rgba(0, 0, 0, 0.5);
            border-radius: 10px;
        }

        input {
            width: 200px;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
         .button-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }
        .button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: rgb(27, 70, 125);
            color: white;
            transition: background-color 0.3s;
        }
        .button:hover {
            background-color: rgb(9, 33, 110);
        } 
        #guest-access {
            width: 220px;
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: rgb(27, 70, 125);
            color: white;
            margin-top: 10px;
            transition: background-color 0.3s;
        }
        #guest-access:hover {
            background-color: rgb(9, 33, 110);
        }
        .error-message {
            color: red;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="left">
        <div class="circle selected" id="user-circle"><i class="fas fa-user"></i>&nbsp;User</div>
        <div class="circle" id="admin-circle"><i class="fas fa-cog"></i>&nbsp; Admin</div>
        <div class="circle" id="superadmin-circle"><i class="fas fa-crown"></i>&nbsp; Super</div>
    </div>
    <div class="vertical-line"></div>
    <div class="right">
        <div class="logo-container">
            <img src="images/logo.png" alt="Logo" class="logo">
            <div class="text-container">  
                <div class="big-text">HuiKing-Movie</div>  
                <div class="small-text">斯是陋室，惟吾德馨</div>  
            </div> 
        </div>
        <div class="loginbox">
            <div class="input-container">
                <div class="profile-pic" id="profile-pic">
                    <img src="photo/start_right_user.jpg" alt="User">
                </div>
                <input type="text" id="username" placeholder="账号">
                <input type="password" id="password" placeholder="密码">
                <div class="button-container" id="button-container">
                    <button class="button" onclick="login()">登录</button>
                </div>
                <div class="error-message" id="error-message"></div>
            </div>
            <!-- <button id="guest-access" onclick="guestLogin()">游客访问</button> -->
        </div>
    </div>

    <script>
        const userCircle = document.getElementById('user-circle');
        const adminCircle = document.getElementById('admin-circle');
        const superadminCircle = document.getElementById('superadmin-circle');
        const leftSection = document.querySelector('.left');
        const profilePic = document.getElementById('profile-pic');
        const buttonContainer = document.getElementById('button-container');
        const guestAccess = document.getElementById('guest-access');
        const errorMessage = document.getElementById('error-message');

        let currentRole = 'user';
        let identity = 0;

        userCircle.addEventListener('click', () => {
            setActiveCircle(userCircle);
            currentRole = 'user';
            identity = 0;
            profilePic.innerHTML = '<img src="photo/start_right_user.jpg" alt="User">';
            profilePic.style.backgroundImage = "url('photo/start_right_user.jpg')";
            updateButtons();
        });

        adminCircle.addEventListener('click', () => {
            setActiveCircle(adminCircle);
            currentRole = 'admin';
            identity = 2;
            profilePic.innerHTML = '<img src="photo/start_right_admin.jpg" alt="Admin">';
            profilePic.style.backgroundImage = "url('photo/start_right_admin.jpg')";
            updateButtons();
        });

        superadminCircle.addEventListener('click', () => {
            setActiveCircle(superadminCircle);
            currentRole = 'superadmin';
            identity = 1;
            profilePic.innerHTML = '<img src="photo/start_right_superadmin.jpg" alt="SuperAdmin">';
            profilePic.style.backgroundImage = "url('photo/start_right_superadmin.jpg')";
            updateButtons();
        });

        function setActiveCircle(selectedCircle) {
            document.querySelectorAll('.circle').forEach(circle => {
                circle.classList.remove('selected');
            });
            selectedCircle.classList.add('selected');
        }

        function updateButtons() {
            buttonContainer.innerHTML = currentRole === 'user'
                ? '<button class="button" onclick="login()">登录</button><button class="button" onclick="register()">注册</button>'
                : '<button class="button" onclick="login()">登录</button>';
            guestAccess.style.display = currentRole === 'user' ? 'block' : 'none';
        }

        async function login() {
            try {
                const user_id = document.getElementById('username').value;
                const user_password = document.getElementById('password').value;

                // 构建发送的数据对象
                const requestData = {
                    user_id: parseInt(user_id), // 确保 user_id 是整数
                    user_password: user_password,
                    identity: parseInt(identity)
                };

                const response = await fetch('http://192.168.78.248:5000/login', { 
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(requestData) // 发送 JSON 格式的数据
                });

                if (response.status === 200) {
                    const result = await response.json();
                    localStorage.setItem('access_token', result.access_token);
                    localStorage.setItem('identity', identity);
                    localStorage.setItem('user_id', user_id); // 保存user_id
                    window.location.href = 'dashboard.html';
                } else if (response.status === 401) {
                    errorMessage.textContent = "账号或密码错误，请重试";
                } else {
                    errorMessage.textContent = "发生未知错误，请重试";
                }
            } catch (error) {
                errorMessage.textContent = "无法连接到服务器，请稍后重试";
            }
        }

        function register() {
            window.location.href = 'register.html';
        }

        function guestLogin() {
            localStorage.setItem('userRole', 'guest');
            window.location.href = 'dashboard.html';
        }

        updateButtons();
    </script>
</body>
</html>
